<template>
  <div class="one-map-3d">
    <div id="cesiumContainer"></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        viewer: null
      };
    },
    mounted() {
      this.initEarth();
      setTimeout(() => {
        this.addDynamicLabel({ id: 'sasas111', position: [108, 34], title: 'lrtest' });
      }, 1000);
    },
    methods: {
      initEarth() {
        // this.this.viewer = new Cesium.Viewer('cesiumContainer', {
        //   // terrainProvider: Cesium.createWorldTerrain(),
        //   // animation: false, // 控制场景动画的播放速度控件
        //   // baseLayerPicker: true, // 底图切换控件
        //   // baselLayerPicker:false,// 将图层选择的控件关掉，才能添加其他影像数据
        //   // // fullscreenButton: false, // 全屏控件
        //   // geocoder: false, // 地理位置查询定位控件
        //   // homeButton: true, // 默认相机位置控件
        //   // timeline: false, // 时间滚动条控件
        //   // infoBox: false, //是否显示信息框
        //   // sceneModePicker: false, //是否显示3D/2D选择器
        //   // selectionIndicator: false, // 点击点绿色弹出 是否显示选取指示器组件
        //   // sceneMode: Cesium.SceneMode.SCENE3D, //设定3维地图的默认场景模式:Cesium.SceneMode.SCENE2D、Cesium.SceneMode.SCENE3D、Cesium.SceneMode.MORPHING
        //   // navigationHelpButton: false, // 默认的相机控制提示控件
        //   // scene3DOnly: true, // 每个几何实例仅以3D渲染以节省GPU内存
        //   // navigationInstructionsInitiallyVisible: false,
        //   // showRenderLoopErrors: false, //是否显示渲染错误
        //   // orderIndependentTranslucency:false,//设置背景透明
        // });

        this.viewer = new Cesium.Viewer('cesiumContainer', {
          homeButton: false,
          sceneModePicker: false,
          baseLayerPicker: false, // 影像切换
          animation: true, // 是否显示动画控件
          infoBox: false, // 是否显示点击要素之后显示的信息
          selectionIndicator: false, // 要素选中框
          geocoder: false, // 是否显示地名查找控件
          timeline: true, // 是否显示时间线控件
          fullscreenButton: false,
          shouldAnimate: false,
          navigationHelpButton: false // 是否显示帮助信息控件
        });
      },
      addDynamicLabel(data) {
        let div = document.createElement('div');
        div.id = data.id;
        div.style.position = 'absolute';
        div.style.width = '100px';
        div.style.height = '30px';
        let HTMLTable = `<div style="background:rgba(255,122,0,0.4)">${data.title}</div>`;
        div.innerHTML = HTMLTable;
        this.viewer.cesiumWidget.container.appendChild(div);
        let gisPosition = Cesium.Cartesian3.fromDegrees(data.position[0], data.position[1], 0);
        //实时更新位置
        this.viewer.scene.postRender.addEventListener(() => {
          const canvasHeight = this.viewer.scene.canvas.height;
          const windowPosition = new Cesium.Cartesian2();
          Cesium.SceneTransforms.wgs84ToWindowCoordinates(this.viewer.scene, gisPosition, windowPosition);
          div.style.bottom = canvasHeight - windowPosition.y + 'px';
          const elWidth = div.offsetWidth;
          div.style.left = windowPosition.x - elWidth / 2 + 'px';

          //解决滚动不隐藏问题
          const camerPosition = this.viewer.camera.position;
          let height = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(camerPosition).height;
          height += this.viewer.scene.globe.ellipsoid.maximumRadius;
          // console.log(camerPosition, val.position);
          if (
            !(Cesium.Cartesian3.distance(camerPosition, gisPosition) > height) &&
            this.viewer.camera.positionCartographic.height < 50000000
          ) {
            div.style.display = 'block';
          } else {
            div.style.display = 'none';
          }
        }, this);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .one-map-3d {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .cesiumContainer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 5;
    }
  }
</style> 